<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            captchaLoad()
        })

        /**
         * 加载验证码
         */
        function captchaLoad(){
            $.ajax({
                url:"http://localhost:8080/captchaImage?"+Math.random(),
                dataType:'json',
                success:function (res) {
                    $("#img").attr("src",res.data.img)
                    $('#uuid').val(res.data.uuid)
                }
            })
        }

        /**
         * 提交
         */
        function doLogin(){
            var user = {
                username:$('#username').val(),
                password:$('#password').val(),
                code:$("#code").val(),
                uuid:$("#uuid").val()
            }
            $.ajax({
                type:"post",
                url:"http://localhost:8080/login ",
                contentType:"application/json",
                data: JSON.stringify(user),
                dataType:'json',
                success:function (res) {
                   if (res.status === 200) {
                       // 将用户信息保存到localStorage
                       localStorage.setItem("userInfo",JSON.stringify(res.data))
                       location.href = "main.html"
                   }else{
                          alert(res.msg)
                          captchaLoad()
                   }
                }
            })
        }
    </script>
</head>
<body>
    <div>
      用户名：<input type="text" id="username"> <br>
      密码：<input type="password" id="password"> <br>
      验证码：<input type="text" id="code">
            <img src="" id="img">
            <input type="hidden" id="uuid"><br>
      <button type="button" onclick="doLogin()">登录</button>
    </div>
</body>
</html>